import React, { Component } from 'react';
import { Animated, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter, Platform } from 'react-native';
import TabBarTitle from './TabBarTitle';
import Colors from '../constants/Colors';
import StickView from './StickView';
import EmptyView from './EmptyView';
import { width, unitWidth } from '../constants/AdapterUtil';
import RefreshFooter from './RefreshFooter';
import { AnimatedButton } from './Button';

//用于往下滑动的时候渐渐隐藏某个view，显示一个新的view
export default class ImageTopListView extends Component {

    //组件属性介绍
    //this.props.childView    列表子布局 传一个方法然后方法内返回布局
    //this.props.list         列表数据
    //this.props.getList      获取列表数据的方法
    //this.props.scrollHeight 移动透明高度
    //this.props.zoomOutView  移动要消失的view
    //this.props.zoomInView   移动要出现的view

    constructor(props) {
        super(props)
        this.state = {
            scrollY: new Animated.Value(0),
            refreshing: false,
            showFoot: 0,//显示上拉加载更多
        }
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    render() {

        let viewList = this._getItemViewList();

        const { scrollHeight } = this.props;
        const zoomIn = this.state.scrollY.interpolate({
            inputRange: [0, scrollHeight, scrollHeight + 1],
            outputRange: [0, 1, 1],
        });
        const zoomOut = this.state.scrollY.interpolate({
            inputRange: [0, scrollHeight, scrollHeight + 1],
            outputRange: [1, 0, 0],
        });
        const translateY = this.state.scrollY.interpolate({
            inputRange: [0, 1, 1, 1 + 1],
            outputRange: [0, 0, 0, 1],
        });

        return (
            <View>
                <Animated.ScrollView
                    ref='list'
                    showsVerticalScrollIndicator={false}
                    onScroll={Animated.event(
                        [{
                            nativeEvent: { contentOffset: { y: this.state.scrollY } } // 记录滑动距离
                        }],
                        { useNativeDriver: true }) // 使用原生动画驱动
                    }
                    scrollEventThrottle={1}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh.bind(this)}
                            colors={[Colors.headerColor]}
                            progressBackgroundColor="#ffffff"
                        />
                    }
                    onMomentumScrollEnd={(event) => {
                        const contentHeight = event.nativeEvent.contentSize.height;
                        const scrollViewHeight = event.nativeEvent.layoutMeasurement.height;
                        const scrollOffset = event.nativeEvent.contentOffset.y;

                        const isEndReached = scrollOffset + scrollViewHeight >= contentHeight - (10 * unitWidth); // 是否滑动到底部
                        const isContentFillPage = contentHeight >= scrollViewHeight; // 内容高度是否大于列表高度
                        if (isContentFillPage && isEndReached) {
                            this.onLoadMore();
                        }
                    }}>
                    <View style={{ alignItems: 'center' }}>
                        <Animated.View style={{
                            transform: [{ translateY: translateY }],
                            zIndex: 1
                        }}>
                            <Animated.View style={{
                                opacity: zoomOut,//透明度动画
                                transform: [{ scale: zoomOut }],
                            }}>
                                {this.props.zoomOutView}
                            </Animated.View>
                            <Animated.View style={{
                                opacity: zoomIn,//透明度动画
                                position: 'absolute',
                                transform: [{ scale: zoomIn }]
                            }}>
                                {this.props.zoomInView}
                            </Animated.View>
                        </Animated.View>
                        {viewList.length > 0 ? viewList : <EmptyView />}
                        <RefreshFooter showFoot={this.state.showFoot} />
                    </View>
                </Animated.ScrollView>
                <AnimatedButton style={{ position: 'absolute', right: 15 * unitWidth, bottom: 11 * unitWidth }}
                    children={
                        <Image source={require('../res/home_icon_zd.png')} style={{ width: 40 * unitWidth, height: 40 * unitWidth }} resizeMode='stretch' />
                    }
                    onPress={() => {
                        // Animated.timing(this.state.scrollY, {
                        //     toValue: 0,
                        //     duration: 250,
                        //     useNativeDriver: true
                        // }).start();


                        this.refs.list._component.getScrollResponder().scrollTo({
                            x: 0, y: 0,
                            animated: true,
                        })
                    }} />
            </View>
        )
    }

    _getItemViewList() {
        let viewList = [];
        if (this.props.list) {
            for (let i = 0, len = this.props.list.length; i < len; i++) {
                let item = this.props.list[i];
                console.log(item)
                viewList.push(this.props.childView ? this.props.childView(item, i) : null);
            }
        }
        return viewList;
    }

    //刷新
    _onRefresh() {
        this.setState({
            refreshing: true,
        });
        this.page = 1;
        this.getList();
    }

    //加载更多
    onLoadMore() {
        console.log('onLoadMore:' + this.state.showFoot);
        //如果是正在加载中或没有更多数据了，则返回
        if (this.state.showFoot != 0) {
            return;
        }
        //底部显示正在加载更多数据
        this.page++;
        this.setState({
            showFoot: 2,
        })
        this.getList();
        //获取数据
    }

    getList() {
        this.props.getList ? this.props.getList(this.page) : null;
    }

    //加载更多后有不止10条的数据和刷新时候完成调用
    onHasMore() {
        this.setState({
            refreshing: false,
            showFoot: 0
        })
    }

    //加载更多后没有数据了调用
    onNoMore() {
        this.setState({
            refreshing: false,
            showFoot: 1
        })
    }
}